<template>
  <!--登录-->
  <div class="login-container">
    <!-- 图片 -->
    <div class="banner-container">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="120"
        height="120"
        viewBox="0 0 120 120"
        version="1.1"
      >
        <polygon points="60,30 90,90 30,90" id="svg_polygon">
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="rotate"
            from="0 60 70"
            to="360 60 70"
            dur="10s"
            repeatCount="indefinite"
          ></animateTransform>
        </polygon>
      </svg>
      创意动画
    </div>

    <div class="login-content-container">
      <div class="logo">智慧灯杆管理平台</div>
      <!--登录内容-->
      <div class="login-content">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <i class="icon el-icon-user"></i>
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <i class="icon el-icon-lock"></i>
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
        </el-form>
        <div class="login-form-foot">
          <div>
            <el-checkbox v-model="remember">记住密码</el-checkbox>
          </div>
          <div>
            <a class="login-form-forgot" @click="forgetPassword()">忘记密码</a>
          </div>
        </div>
      </div>
    </div>
    <!--底部-->
    <!-- <div class="foot-container">
      <p>深圳微自然创新科技有限公司</p>
    </div> -->
  </div>
</template>

<script>
import { toRaw } from "@vue/reactivity";
import { setToken } from "@/utils/token-util";
import authApi from "@/api/auth";
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: checkAge, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
      //左边图片
      login_banner: "images/login_banner.png",
      //记住密码
      remember: false,
    };
  },
  methods: {
    /**提交 */
    submitForm(formName) {
      authApi.login("admin", "1234").then((res) => {
        console.log(res);
      });
    
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const userInfo = toRaw(this.ruleForm);
          if (userInfo.username == "admin" && userInfo.password == "123456") {
            setToken("token123456");
            this.$router.push({ path: "/" });
            this.$message({
              type: "success",
              message: "登录成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: "用户名或密码错误",
            });
            return false;
          }
        } else {
          this.$message({
            type: "error",
            message: "输入格式不正确",
          });
          return false;
        }
      });
    },

    /**重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss">
.login-container {
  min-height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-direction: row;

  /*左边*/
  .banner-container {
    flex: 4 4 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $main_color_2;
  }

  /**右边登录 */
  .login-content-container {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .logo {
      font-size: 30px;
      font-weight: bold;
      padding-bottom: 40px;
      color: $main_color_2;
    }

    .login-content {
      width: 400px;
      box-sizing: border-box;
      background: #ffffff;
      .el-form-item {
        margin-bottom: 30px;
      }
      .icon {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        color: $main_color;
        font-size: 20px;
      }
      .el-input__inner {
        padding-left: 36px;
        border: 1px solid #cbe0ff;
      }
      .el-button {
        width: 100%;
      }

      .el-button--primary {
        background: $main_color_2;
        border-color: $main_color_2;
        &:hover{
          background: #0041a0;
          border-color: #0041a0;
        }
      }

      .login-form-foot {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .el-checkbox,
        .login-form-forgot {
          color: $main_color;
        }
      }
    }
  }
}
</style>